#{extends 'main.html' /}
#{set title:post.title /}

<ul id="pagination">
    #{if post.previous()}
    <li id="previous">
        <a href="@{Application.show(post.previous().id)}">
            ${post.previous().title}
        </a>
    </li>
    #{/if}
    #{if post.next()}
    <li id="next">
        <a href="@{Application.show(post.next().id)}">
            ${post.next().title}
        </a>
    </li>
    #{/if}
</ul>

#{if flash.success}
<p class="success">${flash.success}</p>
#{/if}

#{display post:post, as:'full' /}

<h3>Post a comment</h3>

#{form @Application.postComment(post.id)}

#{ifErrors}
<p class="error">
    ${errors[0]}
</p>
#{/ifErrors}

<p>
    <label for="author">Your name: </label>
    <input type="text" name="author" id="author"/>
</p>
<p>
    <label for="content">Your message: </label>
    <textarea name="content" id="content"></textarea>
</p>
<p>
    <label for="code">Please type the code below: </label>
    <img src="@{Application.captcha(randomID)}"/>
    <br/>
    <input type="text" name="code" id="code" size="18" value=""/>
    <input type="hidden" name="randomID" value="${randomID}"/>
</p>
<p>
    <input type="submit" value="Submit your comment"/>
</p>
#{/form}

<script type="text/javascript" charset="utf-8">
    $(function() {
        // Expose the form
        $('form').click(function() {
            $('form').expose({api: true}).load();
        });

        // If there is an error, focus to form
        if ($('form .error').size()) {
            $('form').expose({api: true, loadSpeed: 0}).load();
            $('form input').get(0).focus();
        }
    });
</script>